<template>
    <div class="tableWrap">
        <!-- <a-table size="small" :columns="columns" :dataSource="tableData" :pagination="false" :scroll="{ y: '39vh' }"
            :showHeader="false" :bordered="true">
        </a-table> -->
        <div class="title">{{ cardItem.titles }}</div>
        <div class="xTitle">{{ cardItem.xTitle }}</div>
        <div class="yTitle">{{ cardItem.yTitle }}</div>
        <div class="extraTtile">
            <div :style="{ background: backgroundFormat(1), width: '13px', height: '13px' }">
            </div>
            <span>{{ `≤5次` }} </span>
                    <div :style="{ background: backgroundFormat(7), width: '13px', height: '13px',marginLeft:'10px' }">
                    </div>
                    <span>{{ `>5次` }} </span>
        </div>
        <div class="tableWrap-content">
            <div class="tableWrap-content-leftline" v-for="item in items.filter((v, i) => i === 0)" :key="item.id">
                <template>
                    <div class="tableWrap-content-leftline-lineClass " v-for="(it, i) in item.child" :key="i">
                        <a-tooltip :title="it.name">
                            <div class="tableWrap-content-leftline-lineClass-name">{{ it.name }}</div>
                        </a-tooltip>
                    </div>
                </template>
                <div class="tableWrap-content-row-date">
                </div>
            </div>
            <div class="tableWrap-content-row" v-for="(item, index) in items" :key="index">
                <template>
                    <div class="tableWrap-content-row-line border" v-for="(it, i) in item.child" :key="i">
                        <a-tooltip placement="left">
                            <template slot="title">
                                <div>
                                    日期：{{ `${processData.selectDate}-${item.name}` }}
                                </div>
                                <div>
                                    时间：{{ `${it.name}` }}
                                </div>
                                <div>数量：{{ it.num }}个</div>
                            </template>
                            <div class="tableWrap-content-row-line-item"
                                :style="{ background: backgroundFormat(it.num) }">
                            </div>
                        </a-tooltip>
                    </div>
                </template>
                <div class="tableWrap-content-row-date">
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TableWrite',
    props: {
        items: {
            type: [Object, Array],
        },
        processData: {
            type: Object,
        },
        cardItem: {
            type: Object,
        }
    },
    data() {
        return {

        }
    },
    methods: {
        backgroundFormat(n) {
            let res;
            if (n == 0) {
                res = '#ffffff';
            } else if (n >= 1 && n <= 5) {
                // res = 'rgba(137, 207, 240,1)';
                res = '#60C9FF'
            } else {
                res = '#7a4c9b';
            }
            return res;
        }
    },
    mounted() {
    }
}
</script>

<style lang="less" scoped>
.tableWrap {
    width: 100%;
    height: 100%;
    padding: 2% 0% 3% 4%;
    position: relative;

    .title {
        position: absolute;
        top: -8px;
        width: 100%;
        text-align: center;
        font-weight: 560;
    }

    .xTitle {
        position: absolute;
        bottom: 1%;
        width: 100%;
        text-align: center;
    }

    .yTitle {
        position: absolute;
        top: 40%;
        left: 1%;
        text-align: center;
        display: flex;
        height: 100%;
        writing-mode: vertical-rl;
        /* 将文本垂直排列，从右到左 */
        text-orientation: upright;
        /* 文本方向保持直立 */
    }

    &-content {
        display: flex;
        height: 100%;
        padding: 0px 8px;

        &-leftline {
            flex-shrink: 0;
            flex: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            height: 100%;
            min-width: 60px;

            &-lineClass {
                display: flex;
                flex-direction: column;
                flex-shrink: 0;
                flex-wrap: nowrap;
                flex: 1;

                &-name {
                    font-size: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-weight: 560;
                    max-height: 14px;
                }

                &-name:hover {
                    background-color: #cdcdcdee;
                }
            }

        }

        &-row {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;

            &-date {
                width: 100%;
                text-align: center;
                width: 100%;
                height: 21px;
            }



            &-line {
                flex: 1;
                display: flex;
                flex-direction: column;

                &-name {
                    font-size: 8px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-weight: 560;
                }

                &-item {
                    width: 100%;
                    height: 100%;
                }
            }

            .border {
                border: 1px solid #cdcdcd;
            }
        }

    }
}

.extraTtile {
    position: absolute;
    top: -8px;
    right: 8px;
    display: flex;
    align-items: center;
}

.blue {
    color: blue;
}

.white {
    color: #ffffff;
}

.blue1 {
    color: rgba(0, 0, 255, 0.1);
}

.blue1 {
    color: rgba(0, 0, 255, 0.2);
}

.blue1 {
    color: rgba(0, 0, 255, 1);
}
</style>